<template>
  <el-form-item :label="label" :prop="prop" :label-width="labelWidth" :required="required" :rules="rules" :error="error" :show-message="showMessage" :inline-message="inlineMessage">
    <el-cascader
      v-model="model"
      :options="options"

      :size="size"
      :disabled="disabled"
      :clearable="clearable"
      :placeholder="placeholder"
      :filterable="filterable"
      :show-all-levels="showAllLevels"
      :collapse-tags="collapseTags"
      :separator="separator"
      :filter-method="filterMethod"
      :change-on-select="changeOnSelect"
      :popper-class="popperClass"
      :popper-append-to-body="popperAppendToBody"
      :before-filter="beforeFilter"
      @blur="blur"
      @focus="focus"
      @visible-change="visibleChange"
      @expand-change="expandChange"
      @active-item-change="activeItemChange"
      @clear="clear"
      @search="search"
      @change="change"

      style="width: 100%"

    ></el-cascader>

  </el-form-item>
</template>

<script>
export default {
  props: {
    value:{
      type:[String,Number,Boolean],
      default:null
    },
    /**
     * el-form-item属性
     */
    label:{
      type:String,
      default:null,
      description:'名字'
    },
    prop:{
      type:String,
      default:null
    },
    labelWidth:{
      type:[Number,String],
      default:null
    },
    rules:{
      type:Object,
      default:null
    },
    error:{
      type:String,
      default:null,
      description:'显示的错误信息'
    },
    showMessage:{
      type:Boolean,
      default:false,
      description:'是否显示校验错误信息'
    },
    required:{
      type:Boolean,
      default:false
    },

    inlineMessage:{
      type:Boolean,
      default:true,
      description:'是否以行内形式展示校验信息'
    },

    /**
     * el-form-item属性end
     */
    /**
     * el-Cascader属性start
     */
    disabled:{
      type:Boolean,
      default:false,
      description:'是否禁用'
    },
    clearable:{
      type:Boolean,
      default:false,
      description:'是否可清空'
    },
    placeholder:{
      type:String,
      default:'请选择',
      description:'占位符'
    },

    filterable:{
      type:Boolean,
      default:false,
      description:'是否可搜索'
    },
    size:{
      type:String,
      default:'medium',
      description:'medium / small / mini'
    },
    showAllLevels:{
      type:Boolean,
      default:false,
      description:'是否显示选中值的完整路径'
    },
    collapseTags:{
      type:Boolean,
      default:false,
      description:'多选时是否将选中值按文字的形式展示'
    },
    separator:{
      type:String,
      default:' / ',
      description:'选项分隔符'
    },
    filterMethod:{
      type:Function,
      default:null,
      description:'自定义搜索方法'
    },
    changeOnSelect:{
      type:Boolean,
      default:false,
      description:'在选中节点时，是否自动展开父节点'
    },
    popperClass:{
      type:String,
      default:'',
      description:'自定义浮层类名'
    },
    popperAppendToBody:{
      type:Boolean,
      default:true,
      description:'是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false'
    },
    beforeFilter:{
      type:Function,
      default:null,
      description:'在显示搜索结果之前，对搜索关键字进行预处理'
    },
    cprops:{
      type:Object,
      default(){
        return {
          multiple:false,
          checkStrictly:false,
          emitPath:true,
          lazy:false,
          lazyLoad:null,
          value:'value',
          label:'label',
          children:'children',
          leaf:'leaf',
          disabled:'disabled',
          hoverThreshold:20
        }
      },
      description:'配置选项'
    },

    /**
     * el-Cascader属性end
     */
    /**
     * options属性start
     */
      options:{
        type:Array,
        default:null,
        description:'选项数组'
      }


    /**
     * options属性end
     */

  },
  watch:{
    value:{
      handler(val){
        this.model = val;
      },
      immediate:true
    },
    model(val){
      this.$emit('input',val);
    }
  },
  data() {
    return {
        model:''
    };
  },
  methods: {
    change(val){
      this.$emit('change',val);
    },
    visibleChange(val){
      this.$emit('visible-change',val);
    },
    removeTag(val){
      this.$emit('remove-tag',val);
    },
    clear(val){
      this.$emit('clear',val);
    },
    blur(val){
      this.$emit('blur',val);
    },
    focus(val){
      this.$emit('focus',val);
    },
    expandChange(val){
      this.$emit('expand-change',val);
    },
    activeItemChange(val){
      this.$emit('active-item-change',val);
    },
    search(val){
      this.$emit('search',val);
    },
    updateModelValue(val){
      this.$emit('update:model-value',val);
    },
    updateVisible(val){
      this.$emit('update:visible',val);
    },
    updateOptions(val){
      this.$emit('update:options',val);
    },
    updateLoading(val){
      this.$emit('update:loading',val);
    },
    updateHoverKey(val){
      this.$emit('update:hover-key',val);
    }


  },
  mounted: function () {

  }
};
</script>
